<template>
  <div id="index" ref="appRef" style="width:100%">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
<!--            <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />-->
            <div class="title">
              <span class="title-text">{{ title }}</span>
<!--              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />-->
            </div>
<!--            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="decorationColors"
            />-->
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <span class="text">{{ subtitle[0] }}</span>
            </div>
            <div class="react-left bg-color-blue ml-3">
              <span class="text">{{ subtitle[1] }}</span>
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="bg-color-black react-right mr-3">
              <span class="text fw-b">{{ subtitle[2] }}</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text">
                {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
                {{ timeInfo.dateDay }}
              </span>
            </div>
          </div>
        </div>

        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box">
            <div>
              <dv-border-box-13>
                <rate-line ref="rateLineRef"/>
<!--              </dv-border-box-13>-->
<!--              <dv-border-box-13>-->
<!--                <center-left1 />-->
                <price-bar ref="priceBarRef"/>
              </dv-border-box-13>
            </div>
<!--            <div>
              <dv-border-box-12>

              </dv-border-box-12>
            </div>-->
            <!-- 中间 -->
            <div>
              <dv-border-box-11 title="场地实时人数">
                <area-table ref="areaTableRef"/>
<!--                        <dv-scroll-board class="dv-scr-board" :config="config" ref="scrollBoardRef"/>-->
              </dv-border-box-11>
            </div>
            <!-- 中间 -->
<!--            <div>
              <center-right1 />
            </div>-->
            <div>
              <dv-border-box-13>
<!--                <center-right2 />-->
                <course-category-pie ref="categoryPieRef"/>
                <course-reserve-pi />
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第四行数据 -->
          <div class="bottom-box">
            <dv-border-box-13>
              <bottom-left />
            </dv-border-box-13>
            <dv-border-box-13>
              <gender-pie ref="genderPieRef"/>
            </dv-border-box-13>
            <dv-border-box-13>
              <age-funnel ref="ageFunnelRef" />
            </dv-border-box-13>
            <dv-border-box-13>
              <equipment-chart />
            </dv-border-box-13>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  onUnmounted
} from 'vue'
import { formatTime } from '@/utils/index'
import { WEEK } from '@/constant/index'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant/index'
import CenterLeft1 from '../centerLeft1/index.vue'
import AgePie from '../agePie/index.vue'
import IncomeExpresesBar from '../incomeExpensesBar/index.vue'
import GenderPie from '../genderPie/index.vue'
import AgeFunnel from '../funnel/index.vue'
import RateLine from '../rateLine/index.vue'
import PriceBar from '../priceBar/index.vue'
import AreaTable from '@/views/datavisual/areaTable/index.vue'
import CourseCategoryPie from '@/views/datavisual/courseCategoryPie/index.vue'
import CourseReservePi from '@/views/datavisual/courseTopNBar/index.vue'
import EquipmentChart from '@/views/datavisual/equipmentChart/index.vue'
import CenterRight1 from '../centerRight1/index.vue'
import CenterRight2 from '../centerRight2/index.vue'
import BottomLeft from '../bottomLeft/index.vue'
import BottomRight from '../bottomRight/index.vue'

const decorationColors = ['#568aea', '#000000']
// * 加载标识
const loading = ref<boolean>(true)
// * 时间内容
const timeInfo = reactive({
  setInterval: 0,
  dateDay: '',
  dateYear: '',
  dateWeek: ''
})

// * 适配处理
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
// 生命周期

onMounted(() => {
  cancelLoading()
  handleTime()
  // todo 屏幕适应
  // windowDraw()
  // calcRate()
  connectWebSocket()
})
const url = 'ws://localhost:9084/ws/1'
const isConnected = ref(false)
const message = ref('')
const websocket = ref<WebSocket>(null)
// const rateUpdated = ref<boolean>(false)

const rateLineRef = ref(null)
const priceBarRef = ref(null)
const categoryPieRef = ref(null)
const genderPieRef = ref(null)
const ageFunnelRef = ref(null)
const areaTableRef = ref(null)
//开启WebSocket
const connectWebSocket = () => {
  websocket.value = new WebSocket(url)

  websocket.value.onopen = () => {
    isConnected.value = true
    // 连接成功后发送数据
    // sendDataToWebSocket()
  }

  websocket.value.onclose = () => {
    isConnected.value = false
  }

  //接收服务器返回数据
  websocket.value.onmessage = (event) => {
    message.value = event.data
    console.log('time',new Date(), 'message', message.value);
    // rateUpdated.value = !rateUpdated.value
    // console.log('rateUpdated.value:',rateUpdated.value);
    const data = JSON.parse(message.value);
    const type = data.type;
    const content = data.content;
    // alert(type);
    if(rateLineRef.value && type === 'rateVisual'){
      rateLineRef.value.setData(content);
      return ;
    }
    if(priceBarRef.value && type === 'priceVisual') {
      priceBarRef.value.setData(content);
      return ;
    }
    if(categoryPieRef.value && type === 'categoryVisual') {
      categoryPieRef.value.setData(content);
      return ;
    }
    if(genderPieRef.value && type === 'genderVisual') {
      genderPieRef.value.setData(content);
      return ;
    }
    if(ageFunnelRef.value && type === 'ageVisual') {
      ageFunnelRef.value.setData(content);
    }
    if(areaTableRef.value && type === 'venueRealVisual') {
      console.log('areaTable',content);
      areaTableRef.value.setData(content);
    }
  }

  websocket.value.onerror = (error) => {
    console.error('WebSocket error:', error)
  }
}

//关闭WebSocket
const disconnectWebSocket = () => {
  if (websocket.value) {
    websocket.value.close()
  }
}

onUnmounted(() => {
  unWindowDraw()
  clearInterval(timeInfo.setInterval)
})

// methods
// todo 处理 loading 展示
const cancelLoading = () => {
  setTimeout(() => {
    loading.value = false
  }, 500)
}

// todo 处理时间监听
const handleTime = () => {
  timeInfo.setInterval = setInterval(() => {
    const date = new Date()
    timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
    timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
    timeInfo.dateWeek = WEEK[date.getDay()]
  }, 1000)
}
</script>

<style lang="scss" scoped>
/*@import '@/assets/scss/index.scss';*/
#index {
  color: #d3d6dd;
  min-width: 1920px;
  min-height: 2080px;
  position: relative;
  .bg {
    width: 100%;
    height: 100%;
    padding: 16px 16px 0 16px;
    background-image: url('@/assets/pageBg.png');
    background-size: cover;
    background-position: center center;
  }

  .host-body {
    .dv-dec-10,
    .dv-dec-10-s {
      width: 33.3%;
      height: 5px;
    }
    .dv-dec-10-s {
      transform: rotateY(180deg);
    }
    .dv-dec-8 {
      width: 200px;
      height: 50px;
    }
    .title {
      position: relative;
      top: 10px;
      width: 500px;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;

      .title-text {
        font-size: 24px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
      }

      .dv-dec-6 {
        position: absolute;
        bottom: -30px;
        left: 50%;
        width: 250px;
        height: 8px;
        transform: translate(-50%);
      }
    }

    // 第二行
    .aside-width {
      width: 40%;
    }
    .react-r-s,
    .react-l-s {
      background-color: #0f1325;
    }

    // 平行四边形
    .react-right {
      &.react-l-s {
        text-align: right;
        width: 500px;
      }
      font-size: 18px;
      width: 300px;
      line-height: 30px;
      text-align: center;
      transform: skewX(-45deg);

      .react-after {
        position: absolute;
        right: -25px;
        top: 0;
        height: 30px;
        width: 50px;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

    .react-left {
      &.react-l-s {
        width: 500px;
        text-align: left;
      }
      font-size: 18px;
      width: 300px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      transform: skewX(45deg);
      background-color: #0f1325;

      .react-before {
        position: absolute;
        left: -25px;
        top: 0;
        height: 30px;
        width: 50px;
        background-color: #0f1325;
        transform: skewX(-45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(-45deg);
      }
    }

    .body-box {
      margin-top: 16px;
      display: flex;
      flex-direction: column;

      //下方区域的布局
      .content-box {
        display: grid;
        //grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
        grid-template-columns: 4fr 7fr 3fr;
      }

      // 底部数据
      .bottom-box {
        margin-top: 10px;
        display: grid;
        grid-template-columns: 4fr 2fr 2fr 3fr;
      }
    }
  }
}

</style>
